<template>
  <div v-show="$route.name == 'order-update'">
    <!-- 面包屑导航区域 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item :to="{ path: '/order-list' }">订单列表
    </el-breadcrumb-item>
      <el-breadcrumb-item>修改订单</el-breadcrumb-item>
    </el-breadcrumb>
    <!-- 卡片视图区域--订单数据修改 -->
    <el-card>
      <div style="margin-bottom: 20px;">订单信息编辑</div>
      <el-form :model="orderForm" :rules="orderFormRules" ref="orderForm" label-width="110px" class="demo-orderForm">
        <el-row>
          <el-col :span="8">
            <el-form-item label="日期" prop="date">
              <el-date-picker type="date" placeholder="选择日期" v-model="orderForm.date" value-format='yyyy-MM-dd'>
              </el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="客户名称" prop="customer">
              <el-select v-model="orderForm.customer" placeholder="请选择名称" clearable popper-class="dropdownbox" filterable >
                <el-option v-for="element in customerList"
                  :label="element.company"
                  :value="element.company">
                  <span style="float: left">{{ element.company }}</span>
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item style="width:90%" label="客户地址" prop="address">
              <el-input v-model="orderForm.address"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="8">
            <el-form-item label="联系人" prop="cname">
              <el-input v-model="orderForm.cname"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="联系方式" prop="phone">
              <el-input v-model="orderForm.phone"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="结算方式" prop="js">
              <el-radio-group v-model="orderForm.js">
                <el-radio label="赊销">赊销</el-radio>
                <el-radio label="现金">现金</el-radio>
                <el-radio label="银行存款">银行存款</el-radio>
                <el-radio label="预付">预付</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="6">
            <el-form-item label="邮费" prop="yf">
              <el-input-number v-model="orderForm.yf" :precision="2" :min="0" controls-position="right"></el-input-number>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="安装费" prop="azf">
              <el-input-number v-model="orderForm.azf" :precision="2" :min="0" controls-position="right"></el-input-number>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="安装日期" prop="installtime">
              <el-date-picker type="date" placeholder="选择日期" v-model="orderForm.installtime" value-format='yyyy-MM-dd'>
              </el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="安装时间" prop="itime">
              <el-time-picker
                v-model="orderForm.itime"
                :picker-options="{
                  selectableRange: '00:00:00 - 23:59:59'
                }"
                placeholder="任意时间点"
                value-format='HH:mm:ss'>
              </el-time-picker>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="8">
            <el-form-item label="是否需要发票" prop="invoice">
              <el-radio-group v-model="orderForm.invoice">
                <el-radio :label="1">是</el-radio>
                <el-radio :label="0">否</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="是否含税" prop="tax">
              <el-radio-group v-model="orderForm.tax">
                <el-radio :label="1">是</el-radio>
                <el-radio :label="0">否</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="是否普伟客户" prop="ispw">
              <el-radio-group v-model="orderForm.ispw">
                <el-radio :label="1">是</el-radio>
                <el-radio :label="0">否</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </el-card>
    <!-- 卡片视图区域--详情数据修改 -->
    <el-card style="margin-top: 10px;">
      <div style="margin-bottom: 20px;">单品信息编辑</div>
      <el-form :model="updateForm" :rules="updateFormRules" ref="updateForm" label-width="110px" class="demo-updateForm">
        <el-row>
          <el-col :span="6">
            <el-form-item label="新旧" prop="new">
              <el-radio-group v-model="updateForm.new" disabled>
                <el-radio :label="1">全新</el-radio>
                <el-radio :label="0">旧品</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="类型" prop="product">
              <el-input v-model="updateForm.product" disabled></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="名称" prop="productn">
              <el-input v-model="updateForm.productn" disabled></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="型号" prop="model">
              <el-input v-model="updateForm.model" disabled></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="6">
            <el-form-item label="数量" prop="amoumt">
              <el-input-number v-model="updateForm.amoumt" controls-position="right" :precision="0" :step="1" :min="0" disabled></el-input-number>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="单价" prop="price">
              <el-input-number v-model="updateForm.price" controls-position="right" :precision="2" :step="1" :min="0"></el-input-number>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="折扣" prop="discount">
              <el-input-number v-model="updateForm.discount" controls-position="right" :precision="2" :step="1" :min="0" :max="updateForm.total"></el-input-number>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="总价" prop="tprice">
              <el-input-number v-model="updateForm.tprice" controls-position="right" :precision="2" :step="1" :min="0"></el-input-number>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="8">
            <el-form-item label="实收" prop="paid">
              <el-input-number v-model="updateForm.paid" controls-position="right" :precision="2" :step="1" :min="0"></el-input-number>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="备注" prop="other">
              <el-input v-model="updateForm.other"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-form-item>
            <el-button @click="back">返回</el-button>
            <el-button type="primary" @click="submitForm()">保存</el-button>
          </el-form-item>
        </el-row>
      </el-form>
    </el-card>
  </div>
</template>
<script>
export default {
  data() {
    return {
      id: '',
      orderForm: {},
      orderFormRules: {
        date: [{ required: true, 'message': '请输入日期', trigger: 'blur' }],
        customer: [{ required: true, 'message': '请选择客户名', trigger: 'change' }],
        address: [{ required: true, 'message': '请输入客户地址', trigger: 'blur' }],
        cname: [{ required: true, 'message': '请输入联系人', trigger: 'blur' }],
        phone: [{ required: true, 'message': '请输入联系方式', trigger: 'blur' }],
        js: [{ required: true, 'message': '请选择结算方式', trigger: 'change', type: 'string' }],
        invoice: [{ required: true, 'message': '请选择是否需要发票', trigger: 'change', type: 'number' }],
        tax: [{ required: true, 'message': '请选择是否含税', trigger: 'change', type: 'number' }],
        ispw: [{ required: true, 'message': '请选择是否普伟客户', trigger: 'change', type: 'number' }],
      },
      updateForm: {},
      updateFormRules: {
        price: [{ required: true, message: '请输入单价', trigger: 'blur' }],
        paid: [{ required: true, message: '请输入实收', trigger: 'blur' }],
        discount: [{ required: true, message: '请输入折扣', trigger: 'blur' }]
      },
      customerList: [],
    }
  },
  mounted() {
    this.getCustomerList()
    this.getOrderData()
  },
  watch: {
    'updateForm.price': {
      handler: function(val, oldval) {
        this.updateForm.tprice = val * this.updateForm.amoumt - this.updateForm.discount
      }
    },
    'updateForm.discount': {
      handler: function(val, oldval) {
        this.updateForm.tprice = this.updateForm.price * this.updateForm.amoumt - val
      }
    },
    'updateForm.tprice': {
      handler: function(val, oldval) {
        if (val != this.updateForm.amoumt * this.updateForm.price - this.updateForm.discount) {
          // 所填总价 > 数量*单价 : 数量设为1 单价为当前总数
          if (val > this.updateForm.price * this.updateForm.amoumt) {
            this.updateForm.discount = 0
            this.updateForm.price = val / this.updateForm.amoumt
          // 数量*单价-折扣 < 所填总数 < 数量*单价 ：修改折扣值
          } else {
            this.updateForm.discount = this.updateForm.price * this.updateForm.amoumt - val
          }
        }
      }
    },
    'orderForm.customer': {
      handler: function(val, oldval) {
        if (val == '') {
          this.orderForm.address = ''
          this.orderForm.cname = ''
          this.orderForm.phone = ''
        }
        var cusData = {}
        cusData = this.customerList.filter(element => {
          return val == element.company
        })
        if (typeof cusData !== 'undefined') {
          cusData = cusData[0]
          this.orderForm.address = cusData.address
          this.orderForm.cname = cusData.name
          this.orderForm.phone = cusData.phone

        }
      }
    }
  },
  methods: {
    // 获取客户数据
    async getCustomerList() {
      const { data: result } = await this.$http.post('/api-customer')
      this.customerList = result.data
    },
    getOrderData() {
      if (this.$route.name === 'order-update') {
        if (this.$route.params.id) {
          this.id = this.$route.params.id
          localStorage.setItem('OrderId', this.$route.params.id)
        } else {
          this.id = localStorage.getItem('OrderId')
        }
        this.getOrder()
      }
    },
    // 获取订单数据
    async getOrder() {
      // 发起编辑的网络请求
      const { data: result } = await this.$http.get('/order-detail/' + this.id)
      if (result.status !== 200) {
        return this.$message.error(result.msg)
      }
      // 订单数据
      this.orderForm = {
        'date': result.data.date,
        'customer': result.data.customer,
        'address': result.data.address,
        'cname': result.data.cname,
        'phone': result.data.phone,
        'js': result.data.js,
        'invoice': parseInt(result.data.invoice),
        'tax': parseInt(result.data.tax),
        'ispw': parseInt(result.data.ispw),
        'yf': result.data.yf,
        'azf': result.data.azf,
        'installtime': result.data.installtime,
        'itime': result.data.itime
      }
      // 单品数据
      this.updateForm = {
        'new': parseInt(result.data.new),
        'product': result.data.product,
        'productn': result.data.productn,
        'model': result.data.model,
        'amoumt': result.data.amoumt,
        'price': result.data.price,
        'discount': result.data.discount,
        'tprice': result.data.tprice,
        'paid': result.data.paid,
        'other': result.data.other,
      }
    },
    // 返回
    back() {
      this.$router.push({ 'name': 'order-list' })
    },
    async submitForm() {
      this.$refs.orderForm.validate(async (valid) => {
        if (!valid) return
        this.$refs.updateForm.validate(async (valid) => {
          if (!valid) return
          // 可以发起新增入库单的网络请求
          const { data: result } = await this.$http.put('/order/' + this.id, {
            orderForm: this.orderForm,
            updateForm: this.updateForm
          })
          if (result.status !== 200) {
            return this.$message.error(result.msg)
          }
          this.$message.success('修改成功！')
          this.$router.push({ path: '/order-list' })
        })
      })
    }
  }
}
</script>
